<template>
  <div class="bills-section">
    <h4 class="section-title">关联账单</h4>
    <el-table :data="billsList" v-loading="loading" border :size="compact ? 'small' : 'default'" :max-height="compact ? 300 : undefined">
      <el-table-column label="账单编号" align="center" prop="billId" :width="compact ? 100 : 100" />
      <el-table-column label="账单名称" align="center" prop="name" :width="compact ? 120 : 120" />
      <el-table-column label="租客姓名" align="center" prop="renterName" :width="compact ? 100 : 120" />
      <el-table-column label="金额" align="center" prop="money" :width="compact ? 100 : 120">
        <template #default="scope">
          <span class="amount-text">¥{{ scope.row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="收款人" align="center" prop="receiverName" width="100" />
      <el-table-column v-if="!compact" label="账单周期" align="center" width="200">
        <template #default="scope">
          <span>{{ scope.row.billCycleBegin }} 至 {{ scope.row.billCycleEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账单状态" align="center" prop="status" :width="compact ? 100 : 100">
        <template #default="scope">
          <dict-tag :options="bill_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="提现状态" align="center" prop="withdrawStatus" width="100">
        <template #default="scope">
          <dict-tag :options="withdraw_audit_status" :value="scope.row.withdrawStatus"/>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="支付平台" align="center" prop="payPlatForm" width="100">
        <template #default="scope">
          <dict-tag :options="pay_platform" :value="scope.row.payPlatForm"/>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="支付时间" align="center" prop="payTime" width="160">
        <template #default="scope">
          <span>{{ scope.row.payTime ? parseTime(scope.row.payTime) : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="通知日期" align="center" prop="noticeDate" width="120">
        <template #default="scope">
          <span>{{ scope.row.noticeDate }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!compact" label="联系方式" align="center" prop="contacts" width="120" />
      <el-table-column v-if="!compact" label="创建时间" align="center" prop="createTime" width="160">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" :min-width="compact ? 80 : 120" />
    </el-table>
    
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getBillsList"
      :layout="compact ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
      :page-sizes="compact ? [5, 10, 20] : [10, 20, 50, 100]"
      :small="compact"
      class="mt-4"
    />
  </div>
</template>

<script setup>
import { ref, reactive, watch, getCurrentInstance } from 'vue'
import { getAssociateBills } from "@/api/apartment/withdraw"

const { proxy } = getCurrentInstance()
const { bill_status, withdraw_audit_status, pay_platform } = proxy.useDict('bill_status', 'withdraw_audit_status', 'pay_platform')

const props = defineProps({
  withdrawId: {
    type: [String, Number],
    required: true
  },
  compact: {
    type: Boolean,
    default: false
  }
})

const billsList = ref([])
const loading = ref(false)
const total = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: props.compact ? 5 : 10
})

const getBillsList = () => {
  if (!props.withdrawId) return
  
  loading.value = true
  getAssociateBills(props.withdrawId, queryParams).then(response => {
    billsList.value = response.rows
    total.value = response.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 监听withdrawId变化，重新获取数据
watch(() => props.withdrawId, (newId) => {
  if (newId) {
    queryParams.pageNum = 1
    getBillsList()
  }
}, { immediate: true })
</script>

<style scoped>
.bills-section {
  margin-top: 20px;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.amount-text {
  color: #f56c6c;
  font-weight: bold;
}

.mt-4 {
  margin-top: 16px;
}
</style> 